<template>
  <div class="app-container">
    <app-main />
    <div class="footer">
      <div class="nav">
        <ul class="navlink">
          <li class="links" v-for="(item, index) in navs" :key="index">
            <router-link :to="item.path" @click="clickhandler($event)">{{ item.label }}</router-link>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script setup>
  import AppMain from "./components/AppMain.vue";

  let l = $ref('0px');
  let w = $ref('104px');
  let navs = [
    {
      label: "人脸注册",
      path: "/FaceRegister",
    },
    {
      label: "人脸签到",
      path: "/FaceAttendance",
    },
  ];

  function clickhandler(e) {
    const el = e.target;
    l = el.offsetLeft + "px"
    w = el.offsetWidth + "px"
  }
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";

.app-container {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.navlink::before {
  position: absolute;
  content: "";
  background-color: #598bf0;
  border-radius: 24px;
  left: v-bind(l);
  width: v-bind(w);
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.nav {
  position: fixed;
  display: flex;
  background-color: #fff;
  border: 4px solid #fff;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  bottom: 0;
}

.navlink {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  justify-content: center;
}
.links {
  display: flex;

  a {
    text-decoration: none;
    padding: 10px 20px;
    z-index: 10;
    color: #598bf0;
  }
  a.router-link-active.router-link-exact-active {
    color: #fff;
    transition: all 0.3s;
  }
  a:not(.router-link-active):hover {
    color: #598bf0;
    transition: all 0.3s;
  }
}

</style>